<template>
  <div>
    <div class="table-bar">
      <p class="page-title">实验管理 > 实验详情</p>
      <div class="object-con-info common-border">
        <div class="flex-row-start">
          <div class="object-con-avatar">
            <span>{{data.experiment_name}}</span>
          </div>
          <div class="flex-column-between">
            <p class="experiment-name">{{data.experiment_name}}</p>
            <p class="experiment-duration flex-row-around">
              <span class="price">￥{{data.price/100}} </span>
              <span>创建时间：{{data.create_time}}</span>
              <span>实验时长：{{data.duration}} 分钟</span>
            </p>
          </div>
        </div>
        <div class="flex-row-wrap experiment-infos">
          <span v-if="env[0].experiment_type === 'single'">镜像名称：{{env[0].images[0]}}</span>
          <span v-else>主镜像名称：{{env[0].images[0]}}       靶机镜像名称：{{env[0].images[1]}}</span>
<!--          <span>子网：{{subnetToLabel(env.cidr_block)}}</span>-->
<!--          <span>子网：{{env[0].cidr_block}}</span>-->
<!--          <span>外网连接：{{env.isOpenLabel}}</span>-->
<!--          <span>安全组：{{env[0].security_group}}</span>-->

          <span>子网：{{cidr_block}}</span>
          <span>外网连接：{{is_open}}</span>
          <span>安全组：{{security_group}}</span>

<!--          <span>安全组：{{security_group_to_label(env.security_group)}}</span>-->
<!--          <span>购买数量：{{data.student_count}}</span>-->
<!--          <span>报告数量：</span>-->
<!--          <span>评阅数量</span>-->
        </div>
        <div class="flex-column-start ind-line">
          <p>
            <el-button @click="goEditExperiment(id)" type="warning">编辑</el-button>
            <el-button @click="onDown" v-if="data.status == 'N'" type="info">下架</el-button>
            <el-button @click="onUp" v-else type="success">上架</el-button>
          </p>
        </div>
      </div>
      <div class="tabs">
        <div @click="setTab('first')" :class="activeTab == 'first' ? 'active-tab' : ''">实验介绍<i @click="goEditExperimentDesc(id)" class="el-icon-edit" /></div>
        <div @click="setTab('second')" :class="activeTab == 'second' ? 'active-tab' : ''">实验指导<i @click="goEditExperimentDesc(id)" class="el-icon-edit" /></div>
        <div @click="setTab('third')" :class="activeTab == 'third' ? 'active-tab' : ''">实验实例</div>
        <div @click="setTab('forth')" :class="activeTab == 'forth' ? 'active-tab' : ''">用户信息</div>
      </div>

      <div v-if="activeTab == 'first'">
        <br/>
        <div v-if="data.detail_type== 'H'"  v-html="data.intro"></div>
        <vue-markdown v-else >{{data.intro}}</vue-markdown>
      </div>
      <div v-if="activeTab == 'second'">
        <div v-if="data.detail_type== 'H'">
          <ul class="title-list">
             <li v-for="describ in data.describe_list" :key="describ" class="title-item">
               <div v-html="describ.detail"></div>
             </li>
          </ul>
<!--          <div  v-for=" describ in data.describe_list" :key="describ">-->
<!--            <div v-html="describ.detail"></div>-->
<!--          </div>-->
        </div>
        <vue-markdown v-else v-for=" describ2 in data.describe_list" :key="describ2">
          {{describ2.detail}}
        </vue-markdown>
      </div>
      <div v-if="activeTab == 'third'">
        <table cellspacing="0" cellpadding="0" class="obj-con-table">
          <thead>
            <tr>
              <td>实例名称</td>
              <td>IP地址</td>
              <td>实例状态</td>
              <td>用户姓名</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(c, i) in instances" :key="'course' + i">
              <td>{{c.instance_name}}</td>
              <td>{{c.ip_address}}</td>
              <td v-if="c.status==''">--</td>
              <td v-else>{{c.status}}</td>
              <!--<td v-if="c.status=='N'">正常</td>-->
<!--              <td v-if="c.status=='S'">关机</td>-->
<!--              <td v-if="c.status=='C'">取消</td>-->
              <td>{{c.username}}</td>
              <td>
                <div>
                 <el-button
                type="primary"
                @click="onRecall(c.id)"
                size="mini"
                class="text-button"
                icon="el-icon-delete"
            >回收
            </el-button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-if="activeTab == 'forth'">
        <table cellspacing="0" cellpadding="0" class="obj-con-table">
          <thead>
            <tr>
              <td>序号</td>
              <td>用户姓名</td>
              <td>开始时间</td>
              <td>提交时间</td>
              <td>参与次数</td>
<!--              <td>成绩</td>-->
<!--              <td>操作</td>-->
            </tr>
          </thead>
          <tbody>
            <tr v-for="(c, i) in reports" :key="'course' + i">
              <td>{{i+1}}</td>
              <td>{{c.username}}</td>
              <td>{{c.start_time}}</td>
              <td>{{c.submit_time}}</td>
              <td>{{c.student_join_count}}</td>
<!--              <td>-->
<!--                <div>-->
<!--                  <el-button @click="goJudge(c.id)" type="primary"> 详情 </el-button>-->
<!--                  <el-button @click="onExport(c.id)" type="primary"> 导出报告 </el-button>-->
<!--                </div>-->
<!--              </td>-->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import goBack from "@/mixins/goBack";
import { experimentModel, reportModel} from "../api/models";
import goMixin from '@/mixins/goMixin.js'
import tabMixin from '@/mixins/tabMixin.js'
import CreateFIlter from '@/mixins/CreateFilter.js'
import {WConfirm} from '@/utils/utils.js'
import {Message} from 'element-ui'
import VueMarkdown from 'vue-markdown'
import selects from '@/common/selects.js'
import openStatus from "@/common/is_open_status";

export default {
  mixins: [goBack, goMixin, tabMixin, CreateFIlter],
  components: {VueMarkdown},
  data() {
    return {
      data: {},
      id: null,
      instances: [],
      reports: [

      ],
      env: [],
      cidr_block: selects.subnets[0].label,
      is_open: openStatus.status[0].label,
      security_group: selects.security_group[1].label
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getItem();
  },
  methods: {
    onShowDetail(row){
      this.$router.push('/env/' + row.id)
    },
    onRecall(ins_id) {
      this.doRecall([ins_id])
    },
      doRecall(instances) {
      this.$confirm('确定回收选中实例？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        experimentModel.insBatchRec({
          instances: instances
        }, res => {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.getInstances();
        }, err => {
          console.log(err)
        })
      }).catch((err) => {
        console.error(err)
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    getItem() {
      experimentModel.item(this.id, res => {
        this.data = res.data;
        if(res.data.environment_id) {
          this.getEnv(res.data.environment_id);
        }
      });
    },
    getEnv(id) {
      experimentModel.env(id, res => {
        res.data.id = id;
        res.data.isOpenLabel = res.data.is_open ? '是' : '否'
        this.env = res.data
      })
    },
    setStatus(status) {
      experimentModel.setStatus({
        id: this.id,
        status: status
      },res=>{
        Message.success(res.message)
        this.getItem()
      },err=>{
        Message.warning(err.message)
      })
    },
    onDown() {
      // 下架
      WConfirm('确定下架该实验', () => {
        this.setStatus('C')
      })
    },
    onUp() {
      // 上架实验
      WConfirm('确定上架该实验', () => {
        this.setStatus('N')
      })
    },
    onExport(id) {
      window.open('/api/object/report/download/' + id, '_blank')
    },
    getInstances() {
      // 获取某实验的实例
      experimentModel.envIns(this.env.id, res => {
        this.instances = res.data
      })
    },
    getStudents() {
      // 获取参与实验的用户
      reportModel.list({
        experiment_id: this.id
      }, res => {
        this.reports = res.data
        console.log(res)
      })
    },
    afterSetTab() {
      switch(this.activeTab){
        case 'third':
          this.getInstances();
          break;
        case 'forth':
          this.getStudents();
          break;
      }
    }
  }
};
</script>
<style scoped lang="scss">
  .object-con-info {
    display: block;
  }
  .experiment-infos > span {
    display: inline-block;
    margin-right: 50px;
    margin-top: 20px;
  }
  .object-con-avatar {
    width: 180px;
    height: 100px;
    background-color: rgba(242, 242, 242, 1);
    color: #333;
  }
  .experiment-duration {
    height: 90px;
    margin-left: 20px;
  }
  .experiment-duration > span{
    margin-left: 50px;
  }
  .experiment-duration > span:first-child{
    margin-left: 10px;
  }
  .experiment-name {
    margin-left: 20px;
  }
  .title-list {
  list-style: none;
  padding: 0;
}
.title-item {
  margin-bottom: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px;
}
</style>